<script>
import {mapState,mapGetters,mapMutations} from 'vuex'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import GoodsForm from '../components/GoodsForm.vue'
export default{
    data(){
        return{
            label:['良','中','次'],
            selectedFile:null,
            goodsList:[],
            goodsClassTmp:[],
            drawer:false,
            updateDialogTableVisible:false,
            insertDialogTableVisible:false,
            curGoods:{
                id:null,
                goods_name:null,
                goods_price:null,
                goods_class:null,
                goods_introduce:null,
                goods_pics:null,
                goods_icon:null,
                goods_class_name:null,
                goods_quality:null,
            }
        }
    },
    components:{
        GoodsForm,
    },
    methods:{
        ...mapMutations('goods',['updateGoodsClass']),
        getGoodsList(){
            axios.get("/api/public/v1/goods/to_shop",{
                params:{
                    shop_id:this.shop[0].id
                }
            })
            .then(res => {
                if(res.data.meta.status==200){
                    this.goodsList=res.data.message
                }
                else{

                }
            })
        },
        getGoodsClass(){
            axios.get("/api/public/v1/class/l1")
            .then(res => {
                if(res.data.meta.status==200){
                    this.goodsClassTmp=res.data.message
                    
                    this.getGoodsL2Class()
                }
                else{
                    alert(res.data.message)
                }
            })
        },
        getGoodsL2Class(){
            this.goodsClassTmp.value = this.goodsClassTmp.id
            this.goodsClassTmp.label = this.goodsClassTmp.name
            this.goodsClassTmp.forEach(l1 => {
                axios.get("/api/public/v1/class/l2_by_l1?id="+String(l1.id))
                .then(res => {
                    if(res.data.meta.status==200){
                        res.data.message.forEach(l2 =>{
                            l2.value = l2.id
                            l2.label = l2.name
                        })
                        l1.children = res.data.message
                    }
                })
            })
            this.updateGoodsClass(this.goodsClassTmp)
        },
        openFileSelector(row){
            this.curGoods=row
            const fileInput = document.querySelector('input[type=file]');  
            if (fileInput) {  
                fileInput.click();  
            }
        },
        update(){
            axios.put("/api/public/v1/goods/updateQualityById",this.curGoods)
            .then(res => {
                console.log(res.data)
                if(res.data.meta.status==200){
                    ElMessage({
                        message: '检测成功',
                        type: 'success',
                    })
                    //this.$emit("commit")
                }
                else{
                    alert(res.data.message)
                }
            })
        },
        // 发送文件作为POST请求的请求体  
        async uploadFile(file){  
            const formData = new FormData()
            formData.append('file', file)// 'file' 是服务器接收文件的字段名，根据后端接口来调整  
            try {  
                const response = await axios.post('http://39.106.84.74:8004/upload_image', formData)
                // 处理响应  
                console.log('上传成功:', response.data);
                if(response.data.pred == "次"){
                    this.curGoods.goods_quality=3
                }else if(response.data.pred == "良"){
                    this.curGoods.goods_quality=1
                }else if(response.data.pred == "中"){
                    this.curGoods.goods_quality=2
                }
                
                
            } catch (error) {  
                
            }
            this.update()
        },
        // 处理文件选择  
        handleFileUpload(event){
            const file = event.target.files[0];  
            if (file) {  
                //this.selectedFile = file;  
                // 发送POST请求  
                this.uploadFile(file);  
            }  
        },
        
        previewIntroduce(row){
            this.curGoods=row
            this.drawer = true
        },
        modify(row){
            this.curGoods=row
            this.updateDialogTableVisible=true
        },
        add(){
            this.curGoods={
                id:null,
                goods_name:null,
                goods_price:null,
                goods_class:null,
                goods_introduce:null,
                goods_pics:null,
                goods_icon:null,
                goods_class_name:null,
                shop_id:this.shop[0].id,
            },
            this.insertDialogTableVisible=true
        },
        drop(row){
            axios.get("/api/public/v1/goods/delete?id="+String(row.id))
                .then(res => {
                        if(res.data.meta.status==200){
                            ElMessage({
                            message: '删除成功',
                            type: 'success',
                        })
                        this.flush()
                    }
                })
        },
        flush(){
            this.getGoodsList()
        },
        quality(goods_quality){
            if(goods_quality == 1){
                return "良"
            }else if(goods_quality == 2){
                return "中"
            }else if(goods_quality == 3){
                return "次"
            }
        }
    },
    computed:{
        ...mapState('user',['user','shop']),
        ...mapState('goods',['goodsClass']),
        
    },
    mounted () {
        this.getGoodsList()
        /*if(JSON.stringify(this.goodsClass)=='[]'){
            this.getGoodsClass()
        }*/
        this.getGoodsClass()

    }
}

</script>
<template>
    <GoodsForm type="update" v-model:dialogTableVisible="updateDialogTableVisible" :curGoods="curGoods" @beforeClose="updateDialogTableVisible=false" @commit="flush"></GoodsForm>
    <GoodsForm type="insert" v-model:dialogTableVisible="insertDialogTableVisible" :curGoods="curGoods" @beforeClose="insertDialogTableVisible=false" @commit="flush"></GoodsForm>
    <el-drawer v-model="drawer">
        <h1>图标预览</h1>
            <el-image :src="curGoods.goods_icon"></el-image>
            {{ curGoods.goods_icon }}
        <h1>轮播图预览</h1>
        <el-carousel height="500px">
            <el-carousel-item v-for="(item,idx) in curGoods.goods_pics" :key="idx">
                <el-image :src="item"></el-image>
            </el-carousel-item>
        </el-carousel>
        <h1>商品详情预览</h1>
        <el-image :src="curGoods.goods_introduce" fit="contain"></el-image>
    </el-drawer>
    <el-button type="primary" @click="add">增加</el-button>
    <el-table :data="goodsList" height="500" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180"/>
        <el-table-column prop="goods_name" label="品名" width="180" />
        <el-table-column prop="goods_price" label="价格" />
        <el-table-column prop="goods_class_name" label="类别"/>
        <el-table-column label="质量">
            <template #default="scoped">
                {{ quality(scoped.row.goods_quality) }}
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scoped">
                <el-button type="primary" @click="openFileSelector(scoped.row)">选择图片</el-button>  
                <input type="file" accept="image/jpeg" @change="handleFileUpload" style="display: none;">  
            </template>
        </el-table-column>

        <el-table-column label="介绍">
            <template #default="scoped">
                <el-button type="primary" @click="previewIntroduce(scoped.row)">预览</el-button>
            </template>
        </el-table-column>
        <el-table-column>
            <template #default="scoped">
                <el-button type="primary" @click="modify(scoped.row)">修改</el-button>
            </template>
        </el-table-column>
        <el-table-column>
            <template #default="scoped">
                <el-button type="danger" @click="drop(scoped.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    
</template>
<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    h1{
        color: black;
    }

</style>